<template>
  <!-- 表2 签协议和合同就业毕业生的单位性质分布  -->
  <div class="chart-box">
    <div
      id="chart-2"
      style="min-width: 300px; height: 400px; margin: 0 auto"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      maintype: [],
      start: null,
      end: null,
      chart: null,
    };
  },
  created() {
    this.axios({
      url: "grad/yearList",
      methods: "get",
    }).then((res) => {
      let years = res.data.data;

      years = years.sort(function (a, b) {
        return a - b;
      });

      //默认为最近一年
      this.start = years[years.length - 1];
      this.end = years[years.length - 1];

      this.get_direction();
    });
  },
  mounted() {
    // this.chart = echarts.init(document.getElementById("chart-2"));
    // window.addEventListener('resize', () => {
    //   if (this.chart) {
    //     setTimeout(() => {
    //       this.chart.resize()
    //     }, 10)
    //   }
    // })
  },
  // computed: {
  //   myChart() {
  //     return echarts.init(document.getElementById("chart-2"));
  //   },
  // },
  methods: {
    count_kind(data) {
      // console.log(data);
      var com_nation = 0;
      var com_personal = 0;
      var com_three = 0;
      var arm = 0;
      var party = 0;
      var bus_high = 0;
      var bus_tech = 0;
      var bus_mid = 0;
      var bus_other = 0;
      var other = 0;
      var sum = 0;
      for (var i in data) {
        var cur = data[i]["term"];
        var num = data[i]["num"];
        if (cur == "国有企业") {
          com_nation += num;
        } else if (cur == "民营企业") {
          com_personal += num;
        } else if (cur == "三资企业") {
          com_three += num;
        } else if (cur == "部队") {
          arm += num;
        } else if (cur == "党政机关") {
          party += num;
        } else if (cur == "高等教育单位") {
          bus_high += num;
        } else if (cur == "科研设计单位") {
          bus_tech += num;
        } else if (cur == "中初教育单位") {
          bus_mid += num;
        } else if (cur == "其他事业单位") {
          bus_other += num;
        } else {
          other += num;
        }
        sum += num;
      }
      // 针对大类进行计算
      var company = com_nation + com_personal + com_three;
      var bussiness = bus_high + bus_tech + bus_mid + bus_other;

      // 按照需求排序 big_term term num
      return [
        sum,
        party,
        bussiness,
        company,
        arm,
        other,
        bus_high,
        bus_tech,
        bus_mid,
        bus_other,
        com_nation,
        com_personal,
        com_three,
      ];
    },
    get_dict(temp) {
      var title = [
        "党政机关",
        "事业单位",
        "企业单位",
        "部队",
        "高等教育单位",
        "科研设计单位",
        "中初教育单位",
        "其他事业单位",
        "国有企业",
        "民营企业",
        "三资企业",
      ];
      // 组织数据
      var table = [];
      for (var i = 0; i < 9; i++) {
        var temp2 = {
          aim: "1",
          item: "1",
          num: "1",
        };
        table[i] = temp2;
      }

      // 党政机关
      table[0].aim = title[0];
      table[0].item = title[0];
      table[0].num = temp[1];
      // 事业单位
      for (var i = 1; i < 5; i++) {
        table[i].aim = title[1];
        table[i].item = title[i + 3];
        table[i].num = temp[i + 5];
      }
      // "国有单位"
      let ii = 5
      table[ii].aim = title[ii + 3];
      table[ii].item = title[ii + 3];
      table[ii].num = temp[ii + 5];
      // console.log("5", title[ii + 3],temp[ii + 5])
      // "民营单位"
      ii = 6
      table[ii].aim = title[ii + 3];
      table[ii].item = title[ii + 3];
      table[ii].num = temp[ii + 5];
      // console.log("6", title[ii + 3])

      //"三资单位"
      ii = 7
      table[ii].aim = title[ii + 3];
      table[ii].item = title[ii + 3];
      table[ii].num = temp[ii + 5];
      // console.log("7", title[ii + 3])

      // 部队
      table[8].aim = title[3];
      table[8].item = title[3];
      table[8].num = temp[4];
      return table;
    },
    fune_tine(table) {
      // 全初始化为0
      var res = [];
      for (var i in table) {
        var temp = {};
        temp.name = table[i].item;
        temp.value = table[i].num;
        res.push(temp);
      }
      return res;
    },
    funetine_legend(table) {
      var party = 0;
      var army = 0;
      var business = 0;
      let com_nation = 0;
      let com_personal = 0;
      let com_three = 0;
      for (let i in table) {
        let num = table[i].num;
        if (table[i].aim == "党政机关") {
          party = party + num;
        } else if (table[i].aim == "民营企业") {
          com_personal = com_personal + num;
        } else if (table[i].aim == "三资企业") {
          com_three = com_three + num;
        } else if (table[i].aim == "国有企业") {
          com_nation = com_nation + num;
        } else if (table[i].aim == "事业单位") {
          business = business + num;
        } else {
          army = army + num;
        }
      }
      // 组合成最终的结果
      var res = [];
      var legend = ["党政机关",  "民营单位","国有单位","三资单位", "事业单位", "部队"];
      for (let i in legend) {
        var temp = {};
        temp.name = legend[i];
        if (legend[i] == "党政机关") {
          temp.value = party;
        } else if (legend[i] == "国有单位") {
          temp.value = com_nation;
        } else if (legend[i] == "三资单位") {
          temp.value = com_three;
        } else if (legend[i] == "民营单位") {
          temp.value = com_personal;
        } else if (legend[i] == "事业单位") {
          temp.value = business;
        } else {
          temp.value = army;
        }
        res.push(temp);
      }
      return res;
    },
    get_direction() {
      this.axios({
        url: "grad/org_kind",
        method: "get",
        params: {
          start: this.start,
          end: this.end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          //本科生
          let bachelor = res.data.data.bachelor;
          //研究生
          let master = res.data.data.master;
          let temp = this.count_kind(bachelor);  //按照统一类目返回
          let temp_mas = this.count_kind(master);
          let table = this.get_dict(temp);  //指定aim方便后续统计
          let table_mas = this.get_dict(temp_mas);
          for (let i = 0; i < table.length; i++) {
            table[i].num = table[i].num + table_mas[i].num;
          }
          let legend = this.funetine_legend(table);
          this.maintype = legend;
          this.$nextTick(() => {
            this.drawChart();
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      echarts.init(document.getElementById("chart-2")).dispose();
      this.chart = echarts.init(document.getElementById("chart-2"));
      let that = this;
      this.chart.setOption({
        title: {
          text: this.start + "届毕业生就业单位性质情况",
          subtext: "签协议和合同就业的毕业生", //副标题 \n 用于换行
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          bottom: "bottom",
          data: ["党政机关", "事业单位", "民营单位","国有单位","三资单位", "部队"],
        },
        series: [
          {
            name: "毕业去向",
            type: "pie",
            selectedMode: "single",
            radius: [0, "55%"],
            label: {
              position: "outer",
              fontSize: 16,
              edgeDistance: "25%",
            },
            labelLine: {
              // smooth: 0.5,
              length: 20,
              length2: 30,
              minTurnAngle: 90,
              maxSurfaceAngle: 90,
            },
            data: that.maintype,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

      // window.addEventListener('resize', () => {
      //   this.chart.resize();
      // })
    },
    resize() {
      this.chart.resize();
    },
  },
};
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
